@tailwind base;
@tailwind components;
@tailwind utilities;

svg,
img {
  display: inline-block;
}

img {
  height: initial;
}

@layer utilities {
  .flex-center {
    @apply flex items-center justify-center;
  }

  .ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@layer base {
  h2 {
    @apply font-bold;
  }
}

@layer components {
  .tag {
    @apply py-2 w-9/12 rounded text-center;
  }

  .tag.success {
    @apply text-success bg-success;
  }

  .tag.danger {
    @apply text-danger bg-danger;
  }

  .tag.warning {
    @apply text-warning bg-warning;
  }

  .container {
    @apply m-center;
  }
}
